<template>
<div class="drawList-box">
    <my-header :title="title"></my-header>
    <div class="coupon-item" :class="className">
        <div class="price">
            <div class="rmb">
                <label>
                    ￥
                    <span>20</span>
                </label>
            </div>
            <div class="tips">20元满减</div>
        </div>
        <div class="cont">
            <h1>万邦西黄胶囊</h1>
            <div class="use-tips">
            <p>使用范围：
                <span>万邦西黄胶囊</span>
            </p>
            <p>有效期：10天</p>
            </div>

        </div>
        <div class="btn" @click="add">{{ className ? '去使用' : '立即领取' }}</div>
        <div class="status-tag"></div>
    </div>
    <div class="coupon-item" :class="className1">
        <div class="price">
            <div class="rmb">
                <label>
                    ￥
                    <span>20</span>
                </label>
            </div>
            <div class="tips">满199元可用</div>
        </div>
        <div class="cont">
            <h1>瑞珠10支(不含防腐剂)</h1>
            <div class="use-tips">
            <p>使用范围：
                <span>聚乙烯醇滴眼液</span>
            </p>
            <p>有效期：5天</p>
            </div>

        </div>
        <div class="btn" @click="add1">{{ className1 ? '去使用' : '立即领取' }}</div>
        <div class="status-tag"></div>
    </div>
</div>
</template>

<script>
import myHeader from "Components/common/myHeader";
import {mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            title: "领劵中心",
            couponList: [],
            className: '',
            className1: '',
        };
    },
    components: {
        myHeader
    },
    methods: {
        ...mapActions(['getCoupon']),
        add () {
            console.log(this.$route)
            if (this.className) {
                this.$router.push({path: '/product/852367'})
            }
            this.className = 'coupon-drew'
        },
        add1 () {
            console.log(this.$route)
            if (this.className1) {
                this.$router.push({path: '/product/11874'})
            }
            this.className1 = 'coupon-drew'
        }
    },
    computed: {
        ...mapGetters(['getCoupons'])
    },
    async mounted () {
        await this.getCoupon()
        this.couponList = this.getCoupons && this.getCoupons.content || []
        console.log(this.couponList)
    }
};
</script>

<style lang="scss" scoped>
    .drawList-box {
        background: #f5f5f5;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;

    }
    .coupon-item {
        height: 0.85rem;
        border-radius: 2px;
        margin: .1rem .12rem;
        overflow: hidden;
        position: relative;
        padding-left: 0.5rem;
        box-sizing: border-box;
        .price {
            position: absolute;
            top: 0;
            left: 0;
            width: .85rem;
            height: .85rem;
            background: #61b1f4;
            color: #fff;
            text-align: center;
            box-sizing: border-box;
            margin-left: .05rem;
            .rmb {
                font-size: .14rem;
                margin-top: .17rem;
                span {
                    font-size: .35rem;
                }
            }
            .tips {
                margin-top: 0;
                font-size: .12rem;
            }
            &::after {
                content: "";
                background: #61b1f4;
                background: radial-gradient(transparent 0,transparent 5px,#61b1f4 0);
                background-size: .12rem .12rem;
                background-position: .05rem .03rem;
                width: .05rem;
                height: 100%;
                position: absolute;
                left: -.04rem;
                top: 0;
            }
        }
        .cont {
            width: 100%;
            background: #fff;
            height: 100%;
            padding: 1px 0 0 .45rem;
            h1 {
                font-size: .14rem;
                color: #333;
                margin-top: .14rem;
            }
            .use-tips {
                margin-top: .12rem;
                font-size: .11rem;
                color: #999;
                line-height: .16rem;
            }
        }
        &.coupon-drew .btn {
            background: none;
            color: #61b1f4;
            border: 1px solid #61b1f4;
            width: .595rem;
            height: .195rem;
        }
        .btn{
            height: .2rem;
            width: .6rem;
            border-radius: .25rem;
            text-align: center;
            font-size: .11rem;
            line-height: .2rem;
            overflow: hidden;
            position: absolute;
            right: .05rem;
            bottom: .1rem;
            background: #61b1f4;
            color: #fff;
        }
        &.coupon-drew .status-tag {
            width: .7rem;
            height: .7rem;
            position: absolute;
            top: -.23rem;
            right: -.05rem;
            background-size: .7rem;
            background-position: 50%;
            background-repeat: no-repeat;
            background-image: url('https://m.jianke.com/dist/status_getted.png?d6e61a9441b085358c9b3d63b26c2353');
        }
    }
</style>
